<template>
	<div v-bind:class="{'sideBar': $store.state.isCollapse, 'sideBar1': !$store.state.isCollapse}">
		<ul class="menu" v-if="$store.state.isCollapse">
			<li class="home actived">
				<router-link to="/index" class="subnavTop"><i class="icon iconfont icon-shouye"></i><span>首页</span></router-link>
			</li>
			<li v-show="userType==1">
				<a class="subnavTop"><i class="icon iconfont icon-xitong"></i><span>系统管理</span></a>
				<ul class="subnav">
					<li>
						<router-link to="/Operator">系统管理员</router-link>
					</li>
				</ul>
			</li>
			<li v-show="userType==1">
				<a class="subnavTop"><i class="icon iconfont icon-jichushujuguanli"></i><span>基础数据</span></a>
				<ul class="subnav">
					<li>
						<router-link to="/collection">征收项目</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-gongchengxiangmu"></i><span>项目管理</span></a>
				<ul  class="subnav">
					<li v-show="projectShow=='00000000-0000-0000-0000-000000000000'">
						<router-link to="/addProject">创建项目</router-link>
					</li>
					<li v-show="userType==1">
						<router-link to="/projectUser">用户管理</router-link>
					</li>
					<li v-show="userType==1">
						<router-link to="/projectRegion">行政区域</router-link>
					</li>
					<li v-show="userType==1">
						<router-link to="/projectPlan">征收计划</router-link>
					</li>
					<li v-show="userType==1">
						<router-link to="/projectStardard">补偿标准</router-link>
					</li>
					<li v-show="userType==1||userType==2">
						<router-link to="/projectLevyFrom">创建户主</router-link>
					</li>
					<li  v-show="userType==1||userType==2||userType==3||userType==4||userType==6">
						<router-link to="/countyExamine">数据审核</router-link>
					</li>
					<li v-show="userType==3||userType==1">
						<router-link to="/cFinance">财务报销</router-link>
					</li>
					<li v-show="userType==3||userType==1">
						<router-link to="/Reimbursement">报销冲抵</router-link>
					</li>
					<li v-show="userType==1">
						<router-link to="/yFinance">数据导入</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-baobiaochaxun"></i><span>报表查询</span></a>
				<ul  class="subnav">
					<li>
						<router-link to="/PayReport">统计表1 报销统计结算表</router-link>
					</li>
					<li>
						<router-link to="/SpeedReport">统计表2 进度统计表</router-link>
					</li>
					<li>
						<router-link to="/LandClass">统计表3 征地分类统计表</router-link>
					</li>
					<li>
						<router-link to="/HlandReport">统计表4 分户征地统计表</router-link>
					</li>
					<li>
						<router-link to="/LandGlory">统计表5 征地光荣榜</router-link>
					</li>
					<li>
						<router-link to="/UnLandReport">统计表6 未领取土地补偿人员统计表</router-link>
					</li>
					<li>
						<router-link to="/comInfoQuery">统计表7 补偿信息状态查询表</router-link>
					</li>
				</ul>
			</li>
		</ul>
		
		<ul class="menu1" v-else>
			<li class="home">
				<router-link to="/index" class="subnavTop"><i class="icon iconfont icon-shouye"></i><span>首页</span></router-link>
			</li>
			<li v-show="userType==1">
				<a class="subnavTop"><i class="icon iconfont icon-xitong"></i><span>系统管理</span></a>
				<ul class="subnav1">
					<li>
						<router-link to="/Operator">系统管理员</router-link>
					</li>
				</ul>
			</li>
			<li v-show="userType==1">
				<a class="subnavTop"><i class="icon iconfont icon-jichushujuguanli"></i><span>基础数据</span></a>
				<ul class="subnav1">
					<li>
						<router-link to="/collection">征收项目</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-gongchengxiangmu"></i><span>项目管理</span></a>
				<ul  class="subnav1">
					<li v-show="userType==1">
						<router-link to="/addProject">创建项目</router-link>
					</li>
					<li v-show="userType==1">
						<router-link to="/projectUser">用户管理</router-link>
					</li>
					<li v-show="userType==1">
						<router-link to="/projectRegion">行政区域</router-link>
					</li>
					<li v-show="userType==1">
						<router-link to="/projectPlan">征收计划</router-link>
					</li>
					<li v-show="userType==1">
						<router-link to="/projectStardard">补偿标准</router-link>
					</li>
					<li v-show="userType!=3||userType!=4||userType!=5||userType!=6||userType!=7||userType!=8">
						<router-link to="/projectLevyFrom">创建户主</router-link>
					</li>
					<li v-show="userType!=5||userType!=7||userType!=8">
						<router-link to="/countyExamine">数据审核</router-link>
					</li>
					<li v-show="userType==3||userType==1">
						<router-link to="/cFinance">财务报销</router-link>
					</li>
					<li v-show="userType==3||userType==1">
						<router-link to="/Reimbursement">报销冲抵</router-link>
					</li>
					<li v-show="userType==1">
						<router-link to="/yFinance">数据导入</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-baobiaochaxun"></i><span>报表查询</span></a>
				<ul  class="subnav1">
					<li>
						<router-link to="/PayReport">统计表1 报销统计结算表</router-link>
					</li>
					<li>
						<router-link to="/SpeedReport">统计表2 进度统计表</router-link>
					</li>
					<li>
						<router-link to="/LandClass">统计表3 征地分类统计表</router-link>
					</li>
					<li>
						<router-link to="/HlandReport">统计表4 分户征地统计表</router-link>
					</li>
					<li>
						<router-link to="/LandGlory">统计表5 征地光荣榜</router-link>
					</li>
					<li>
						<router-link to="/UnLandReport">统计表6 未领取土地补偿人员统计表</router-link>
					</li>
					<li>
						<router-link to="/comInfoQuery">统计表7 补偿信息状态查询表</router-link>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</template>

<script>
	import store from '@/vuex/store'
	export default {
		name: 'sideBar',
		data(){
			return{
				userType:1,
				projectShow:''
			}
		},
		store,
		mounted() {
			$('.router-link-active').parent().parent().siblings().css('color','#e1e2e3')
			$(".home").click(function(){
    				$(".subnav").hide(300)
    		})
			$('.subnav').hide();
			$('.menu>li').on('click', function() {
				$(this).addClass("actived").siblings().removeClass("actived")
				var that = $(this)
				$(this).children('.subnavTop').css('color','#9289ca')
				.parent().siblings().children('.subnavTop').
				css('color','#e1e2e3').end().end().children('.subnav')
				.toggle(200).addClass("animated slideInLeft")
				.parent().siblings().children("ul").hide(300)
				setTimeout(function() {
					that.children("ul").removeClass("slideInLeft animated")
				}, 1000);
			})
			$(".menu>li>ul").click(function(){
    				event.stopPropagation();
			 })
			 this.userType=sessionStorage.UserType
			 this.projectShow=sessionStorage.ProjectID
		},
		methods: {
			
		}
	}
</script>

<style>
.sideBar {
		padding-top: 60px;
		width: 200px;
		height: 100%;
		background: #3a3f51;
		position: fixed;
		transition: all 0.2s ease;
		z-index: 99;
		overflow-y: auto;
		/*padding-bottom: 60px;*/
	}
	.sideBar1 {
		padding-top: 60px;
		width: 70px;
		height: 100%;
		background: #3a3f51;
		position: fixed;
		transition: all 0.2s ease;
		z-index: 99;
		/*overflow-y: auto;*/
	}
	
	.menu {
		width: 100%;
		color: #fff;
		padding-bottom: 80px;
	}
	
	.menu a {
		color: #fff;
		text-decoration: none;
	}
	.menu li.actived{
		    border-left-color: #9289ca;
	}
	.menu>li {
		position: relative;
		transition: all 0.3s;
	}
	
	.subnav li a {
		padding-left: 45px;
		transition: all 0.3s;
	}
	
	.menu li {
		border-left: 3px solid transparent;
		-webkit-transition: border-left-color 0.2s ease;
		-o-transition: border-left-color 0.2s ease;
		transition: all 0.2s ease;
	}
	
	.menu a {
		color: #e1e2e3;
		padding: 12px 24px;
		letter-spacing: .025em;
		font-weight: 400;
		cursor: pointer;
		display: block;
		text-decoration: none;
		transition: all .3s;
	}
	
	.router-link-active {
		color: #9289ca !important;
	}
	@keyframes slideInLeft {
		from {
			transform: translate3d(-100%, 0, 0);
			visibility: visible;
		}
		to {
			transform: translate3d(0, 0, 0);
		}
	}
	
	.slideInLeft {
		animation-name: slideInLeft;
	}
	
	.animated {
		animation-duration: 1s;
		animation-fill-mode: both;
	}
	
	.animated.infinite {
		animation-iteration-count: infinite;
	}
	.menu .icon{
		font-size: 20px;
	}
	
	.menu1 a {
		color: #fff;
		text-decoration: none;
	}
	.menu1{
		height: 100%;
		width: 70px;
		color: #fff;
		transition: all 0.3s;
	}
	.menu1 .icon{
		font-size: 40px;
	}
	.menu1 span{
		display: none;
		transition: all 0.3s;
	}
	.menu1>li{
		padding: 10px 0;
		position: relative;
	}
	.menu1>li>a{
		text-align: center;
		display: block;
		
	}
	.menu1>li>.subnav1{
		width: 220px;
		background:  #3a3f51;
		position: absolute;
		display: none;
		top: 0;
		left: 67px;
		z-index: 99;
		transition: all 0.3s;
		border-left: 2px solid #2f3447;
	}
	.subnav1>li{
		line-height: 40px;
		text-indent: 20px;
	}
	.menu1>li:hover .subnav1{
		display: block !important;
	}
	.menu1>li>.subnav1>li>a{
		display: block;
	}
	.menu .icon{
		font-size: 20px;
		margin-right: 10px;
	}
</style>
